<script setup>
import { ref } from 'vue'

let props = defineProps(['entityDataItem'])
let entityDataItem = props.entityDataItem

let model101Active = ref(1)
const onModel3Active = (page) => {
    model101Active.value = page
}
</script>


<template>

    <div class="model101-box">
        <div class="model101-box-son">
            <div class="row1">
                <div class="img-box">
                    <img v-if="model101Active === 1" :src="entityDataItem.image0" alt="">
                    <img v-if="model101Active === 2" :src="entityDataItem.image1" alt="">
                    <img v-if="model101Active === 3" :src="entityDataItem.image2" alt="">
                </div>
                <div class="button-box">
                    <button @click="onModel3Active(1)" :class="model101Active == 1 ? 'active' : ''"></button>
                    <button @click="onModel3Active(2)" :class="model101Active == 2 ? 'active' : ''"></button>
                    <button @click="onModel3Active(3)" :class="model101Active == 3 ? 'active' : ''"></button>
                </div>
            </div>
        </div>
    </div>

</template>


<style scoped>
.model101-box {
    width: 100%;
    height: 11rem;
    overflow: hidden;
    margin-bottom: 0.4rem;
}

.model101-box-son {
    width: 100%;
    height: 100%;
}

.model101-box-son>.row1 {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.model101-box-son>.row1>.img-box {
    width: 100%;
    height: 100%;
}

.model101-box-son>.row1>.img-box>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.model101-box-son>.row1>.button-box {
    position: absolute;
    width: 100%;
    bottom: 0.5rem;
    left: 0;
    padding: 0;
    line-height: 0.5rem;
}

.model101-box-son>.row1>.button-box>button {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0.25rem;
    margin: 0 0.3rem;
    cursor: pointer;
    border: none;
    background-color: rgb(235, 237, 240);
}

.model101-box-son>.row1>.button-box .active {
    background-color: red;
}
</style>
